<template>
  <div class="news_comments">
    <van-nav-bar
      title="我的评论"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div
      class="list"
      v-for="(item,index) of newsReviersVo"
      :key="index"
    >
      <ul>
        <li class="one-row">
          <div>
            <img
              class="tx"
              :src="item.customerHandImage"
            >
          </div>
          <div class="one-row-bottom">
            <p class="name">{{item.customerNickName}}</p>
            <p style="color: rgba(151, 149, 149, 100);font-size: 12px;">{{item.localReviersTime}}</p>
          </div>
        </li>
        <li>
          <div class="titleText">
            <p>{{item.localReviewsTitle}}/{{item.localReviewsText}}</p>
          </div>
        </li>
        <li>
          <div align="" class="demo-contentImg" v-for="pic in item.pictureList">
            <van-image width="10rem" height="10rem" fit="cover"  :src="pic.localPictureUrl"/>
          </div>
        </li>
        <li>
          <div class="demo-primary">
            <van-tag plain type="primary" style="padding: 0.15rem">石家庄同城</van-tag>
            <van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>
          </div>
        </li>
        <li>
          <div class="demo-contento" style="text-align: right;padding-top: 0.4rem">
            <div class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
              <van-icon name="chat-o" />
              <span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
            </div>
            <div class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
              <van-icon :name="item.localFabulousStatus==1?name1:name"/>
              <span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 自定义图标 -->
    <van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="block-top">
            <p>全部评论{{replyVoList.length}}条</p>
          </div>
          <div class="block-list">
            <div class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
              <img src="https://img.yzcdn.cn/vant/logo.png">
              <div class="list-demo-content">
                <div>
                  <h2>{{item.customerNickName}}</h2>
                  <p>{{item.localReplyTime}}</p>
                </div>
                <p class="neiRong">{{item.localReplyText}}</p>
              </div>
              <div class="block-list-like">
                <van-icon name="like-o"/>
                <span class="block-list-likes" style="font-size: 0.8rem;">{{item.localReplyFabulous}}</span>
              </div>
            </div>
          </div>

          <div class="block-bottom">
            <van-cell-group>
              <van-field
                v-model="localReplyText"
                clearable label=""
                left-icon="edit"
                placeholder="评论一下~"
                center
                style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem"
                @click-left-icon="insertLocalReply"
              />
            </van-cell-group>
          </div>

        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
  import {Toast} from "vant";
  import { Tab, Tabs } from 'vant';
  import {
    selectNewsReviersVo,
    selectReplyVoByRevierwsId,
    addLocalReply,
    localFabulousJian,
    localFabulousJia1,
    localFabulousJia,
  } from '@/api/customer/local.js';
export default {
  name: "news_comments",
  data () {
    return {
      name: 'like-o',
      name1: 'like',
      //评论过的消息集合
      newsReviersVo:[],
      //发布信息的id
      localReviersId:'',
      //回复的框
      show:false,
      //回复的列表
      replyVoList:[],
      //评论的内容
      localReplyText:'',
      //点赞中间表数据参数
      localFabulous:{
        localReviersId:'',
        localFabulousStatus:'',
      },

    }
  },
//页面渲染前自动加载
  created(){
    this.getSelectNewsReviersVo();
  },
  //方法
  methods:{
    //评论过的消息
    getSelectNewsReviersVo(){
      selectNewsReviersVo().then((res)=>{
        this.newsReviersVo = res.data.data;
        console.log(res);
      })
    },
    //查看发布信息回复
    huiFuSee(localReviewsId){
      this.localReviersId = localReviewsId;
      this.show = true;
      selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
        this.replyVoList = res.data.data;
        console.log(res);
      })
    },
    // 发表评论
    insertLocalReply(){
      addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
        console.log(res)
        if(res.code == 500){
          Toast("评论失败");
        }else{
          Toast("评论成功");
          this.huiFuSee(this.localReviersId);
          this.localReplyText = '';
        }
      })
    },
    // 点赞
    giveThumbsUp(localReviewsId,localFabulousStatus){
      this.localFabulous.localReviersId = localReviewsId;
      console.log(localReviewsId,localFabulousStatus)
      switch (localFabulousStatus) {
        case 1:
          this.localFabulous.localFabulousStatus = 0;
          localFabulousJian(this.localFabulous).then((res)=>{
            if (res.data.code==200){
              this.getSelectNewsReviersVo();
            }
            console.log(res)
          })
          break
        case 0:
          this.localFabulous.localFabulousStatus = 1;
          localFabulousJia1(this.localFabulous).then((res)=>{
            if (res.data.code==200){
              this.getSelectNewsReviersVo();
            }
            console.log(res)
          })
          break
        default:
          this.localFabulous.localFabulousStatus = 1;
          localFabulousJia(this.localFabulous).then((res)=>{
            if (res.data.code==200){
              this.getSelectNewsReviersVo();
            }
            console.log(res)
          })
          break;
      }
    },


  },

}
</script>

<style scoped>
.news_comments {
  height: 100%;
  background-color: #f4f4f4;
}

.price {
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: left;
  margin-top: 5vw;
  font-family: SourceHanSansSC-bold;
}

.four-right {
  margin-left: 8px;
}

.spxq {
  color: rgba(91, 91, 91, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  -webkit-line-clamp: 3;
}

.four-row {
  margin: 10px 0;
  display: flex;
  align-items: unset;
}

.four-left img {
  width: 24vw;
  height: 24vw;
}

.three-img {
  margin-left: 2%;
}

.three-row img {
  margin-top: 3%;
}

.three-row {
  display: flex;
}

.three-row img {
  width: 24vw;
}

p {
  display: -webkit-box;
  /*-webkit-box-orient: vertical;*/
  /*-webkit-line-clamp: 2;*/
  overflow: hidden;
}

.two-row {
  margin-top: 8px;
  color: rgba(91, 91, 91, 100);
  font-size: 13px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.one-row-bottom {
  margin-left: 8px;
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #ffffff;
  margin: 10px 0;
}

.tx {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
}

.one-row {
  display: flex;
}

.name {
  color: rgba(104, 104, 103, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}
  .demo-contentImg{
    display: inline-block;
    margin: 0.1rem;
  }
  .titleText{
    text-align: left;
  }
 .demo-primary{
   float: left;
   padding: 0.5rem 0;
}
.demo-contento .demo-contento-chat{
  margin-top: 25px;
  display: inline-block;
  margin-right: 0.4rem;
}
.demo-contento .demo-contento-like{
  display: inline-block;
}


.wrapper {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 100%;
  position: relative;
  margin-bottom: 50px ;
}
.block {
  width: 100%;
  height: 70%;
  background-color: #fff;
  bottom: 0;
  position: absolute;
  padding: 1rem 1rem 3.125rem 1rem;
  overflow: auto;
}
.block .block-top{
  padding-left: 1rem;
  font-weight: 700;
  float: left;
}
.block .block-list{
  padding: 1rem 1.5rem;
}
.block .block-list .block-list-demo{
  padding: 1rem 0;
  position: relative;
}
.block .block-list .block-list-like{
  display: inline-block;
}
.block .block-list .list-demo-content{
  margin-left: 0.5rem;
  width: 70%;
  display: inline-block;
}
.block .block-list .list-demo-content div{
  float: left;
  padding-bottom: 0.5rem;
}
.block .block-list .list-demo-content div h3{
  font-size: 0.75rem;
}
.block .block-list .list-demo-content div p{
   font-size: 0.5rem;
 }
.neiRong{
  width: 80%;
  font-size: 0.75rem;
  text-align: left;
}
.block .block-list .block-list-demo img{
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  float: left;
  margin: 0;
}
.block .block-bottom{
  padding: 1rem;
  width: 91%;
  position: fixed;
  z-index: 100;
  bottom: 0rem;
  background-color: #fff;
}

</style>
